<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#div1{
				width: 220px;
				height: 220px;
				background-color: dodgerblue;
			}
			#div2{
				width: 220px;
				height: 220px;
				background-color: aqua;
			}
			#div3{
				width: 220px;
				height: 220px;
				background-color: coral;
			}
		</style>
	</head>
	<body>
		<div id="div1" class="Div1">
			<h3 align="center">我是div1</h3>
			<p>p1</p>
			<p>p2</p>
			<p>p3</p>
			<p>p4</p>
			<p>p5</p>
		</div><br>
		<div id="div2" class="Div2">
			<h3 align="center">我是div2</h3>
			<img src="css/01.jpg" width="144px" height="90px">
		</div><br>
		<div id="div3" class="Div3">
			<h3 align="center" >我是div3</h3>
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
			<li>列表4</li>
			<li>列表5</li>
		</div>
		<button type="button" onclick="FindID();">通过ID找</button>
		<button type="button" onclick="FindClassname();">通过类找</button>
		<button type="button" onclick="FindTag();">通过标签找</button>
	</body>
	<script type="text/javascript">
		function FindTag(){
			var finddiv = document.getElementsByTagName('div');
			console.log(finddiv);
		}
		function FindClassname(){
			var finDiv1 = document.getElementsByClassName('Div1');
			var finDiv2 = document.getElementsByClassName('Div2');
			var finDiv3 = document.getElementsByClassName('Div3');
			console.log(finDiv1);
			console.log(finDiv2);
			console.log(finDiv3);
		}
		function FindID(){
			var findiv1 = document.getElementById('div1');
			var findiv2 = document.getElementById('div2');
			var findiv3 = document.getElementById('div3');
			console.log(findiv1);
			console.log(findiv2);
			console.log(findiv3);
		}
	</script>
</html>
